No estás solo

Las 4 etapas por las que pasamos con la caída del hosting

» Fuente: elwebmaster

Visto en:» 2desktop

Recién me entero en El escaparate de esta nueva noticia. Ya podemos recuperar un blog eliminado con el contenido tal y como lo teníamos en el momento que por error o por decisión propia eliminamos.

Supongo que muchos estarán contentos y los chicos los Grupos de Ayuda de Google también ya que esa es una de las peticiones que se realizan con mayor frecuencia.

Los blogs eliminados se mostrarán en la parte inferior de nuestro escritorio sobre nuestra lista de lectura, si fuera el caso que tenemos blogs ocultos es necesario hacer click en el enlace de "Mostrar todo" para localizarlos.

Ante el problema surgido con SkyDrive parece ser que no queda otra solución que buscar un sitio donde alojar nuestros archivos.
Y lo parece, pero si estos días habéis visitado a J.Miur veréis que ofrece varias alternativas, hace tiempo que ya nos hablaba sobre el tema y aquella entrada da la sensación ahora de ser una premonición pero nada más lejos, aquella explicación es fruto de la experiencia y de este largo peregrinar con archivos de un sitio a otro.

La alternativa que ofrece es la de alojar los archivos en la misma plantilla, hablamos de scripts, archivos .js y css.

Supongamos que descargamos un archivo .js por lógica lo guardamos en alguna carpeta de nuestro PC para más tarde alojarlo en un servidor y añadirlo a nuestra plantilla.

Llega un día que nuestro script deja de funcionar así que lo primero que haremos será ver si ese archivo está online.

Sabemos que un archivo está online copiando la url del archivo que añadimos a nuestra plantilla o a cualquier gadget, pegándola en la barra del navegador y pulsando la tecla "Enter". Si el archivo está online nos ofrece la posibilidad de descargarlo o... nos muestra un archivo donde podemos visualizar el código.

Comprobado que nuestro archivo ya no está online hacemos lo siguiente... Abrimos el bloc de notas y buscamos el archivo, una vez localizado lo abrimos y copiamos su contenido. "Ver detalles".

Una vez copiado el contenido del archivo nos situamos en plantilla edición de HTML y antes de </head> añadimos lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// AQUÍ PONEMOS EL NOMBRE DEL ARCHIVO
y aquí pegamos lo que copiamos del bloc de notas
..................
..................
..................
al final añadimos lo siguiente:
//]]>
</script>

Los archivos CSS más de lo mismo, añadimos:

<style type='text/css'>
aquí incluimos el contenido
</style>

Otra alternativa que nos da J.Miur es añadirlos en las mismas entradas donde vamos a utilizar el script, eso suele hacerse cuando la finalidad de ese script es no usarlo con frecuencia. Yo suelo hacerlo en los ejemplos de algunas entradas.

Hasta ahí parece fácil, y lo es aunque la tarea requiere su tiempo. ¿Pero qué ocurre con aquellos archivos que por su extensión nos van a ocupar mucho espacio en la plantilla? sin duda hay que buscar alojamiento.

Buscando alternativas todos pusieron su granito de arena o contaron sus experiencias, esa es la parte que me ha gustado de todo este problema. La solidaridad y la unión se muestra en esos pequeños detalles.

» NKR está utilizando GooglepPages (Hay que tener precaución ya que avisaron con tiempo que cerraría)
» Rô proporciona JavaScript Host y nos explica con detalle en su blog. (Hasta ahora es el que más me convence)
» Guille Angulo se suma a GooglePages
» Doc.C@ble nos trae Geocites
» Jose opina que JavaScript Host funciona sin problemas.
» Fabiana se suma a JavaScript Host
» Squirrel nos comenta sobre JavaScript Host, Boxstr, FileDen y FileFactory
» Henry coincide con JavaScript Host y FileDen.
» BanakaBanaka nos hace una entrega cuyo aporte es alojar los archivos en GoogleSites.

Yo tengo scripts alojados en Boxstr desde hace un año y también sin problemas eso si es algo lento también he probado JavaScript Host y está muy bien.

Por lo pronto intento alojar los scripts en la plantilla pero no todos claro está son demasiados y tendré que subir la mayoría. Mi recomendación es que tengáis más de un alojamiento con los archivos que utilizáis en el blog sean del tipo que sean, es una forma de ganar tiempo y ahorrarnos trabajo por si en un futuro un alojamiento presenta problemas recurrir al otro.

No olviden visitar Vagabundia encontrarán información sobre problemas, soluciones y alternativas, yo me arriesgaría a decir que hasta milagros.

Bueno, lo dejamos en grandes soluciones.

Según me han comentado hay scripts que han dejado de funcionar, he comprobado y en efecto es así. El problema no es sólo en este blog y eso me hace pensar que SkyDrive tiene algo que ver ya que es el servidor que la mayoría usamos. Estoy solucionando el problema, pero aún así hago la recomendación de siempre...

Los scripts que solemos utilizar es recomendable descargarlos y alojarlos en nuestro servidor, el usemos normalmente para alojar aquellos archivos que Blogger no proporciona alojamiento como son por ejemplo los archivos .js

Es mucho más cómodo copiar la url del alojamiento pero eso a la larga nos perjudica a todos, a la persona que proporciona el script porque puede darse el caso de superar la banda ancha y con ello el archivo no tiene utilidad alguna y a quien copia la url porque si más adelante deja de funcionar o cambia de alojamiento nos encontramos que nuestros scripts ya no funcionarán.

Si encontráis algo que no funcione correctamente agradecería mucho un comentario.

Pho.to es una página a las que yo llamo de entretenimiento, no se trata de un potente editor de imágenes sino de un sitio que proporciona distintas herramientas de forma independiente. La más conocida es Makeup Pho.to entenderán por qué cuando lean lo que esa herramienta hace.

¡Haga que la persona que aparece en su foto parezca modelo de una revista glamorosa! Coloque maquillaje sobre los ojos y la piel, blanquee los dientes, quite las imperfecciones y dé a su foto un toque especial con un efecto de enfoque suave. Todas las mejoras se realizan automáticamente, solo cargue la foto y ¡disfrute de este cambio mágico!

Si nos registramos también podemos crear Flash slideshows,albums3D ,galleries 3D... Lo que yo decía, un sitio para entretenerse.

La etiqueta span la utilizamos para dar estilo sin necesidad de recurrir a CSS, algo similar ocurre con la etiqueta div pero esta última crea un bloque. Un ejemplo de etiqueta div sería el siguiente <div >

Este texto es de color rojo

</div> He escrito todo en la misma línea sin embargo la etiqueta div añade espacios en blanco en sus extremos.Si probamos a editar de nuevo un post nos encontraremos que se ha alterado el orden de lo que habíamos escrito y la etiqueta div ha creado saltos de línea.

Ahora el ejemplo con la etiqueta span <span > Este otro también es rojo pero soy span y mi etiqueta es más ordenada </span> ¿Qué tal ahora? la etiqueta span no altera nada, se sitúa en la misma línea y sólo cambia si le añadimos estilos.

Ese ejemplo nos demuestra que para darle estilos a un texto la etiqueta span es mucho más manejable, al igual que añadimos color también podemos escoger el tipo de fuente:

Soy fuente comic y color orangered
<span style=";font-family:comic sans ms;color:orangered;" >Soy fuente comic y color orangered </span>

Soy fuente comic,color orangered y de mayor tamaño
<span style=";font-family:comic sans ms;font-size:16px;color:orangered;" >Soy fuente comic,color orangered y de mayor tamaño </span>

» Cada vez que añadimos un estilo lo separamos por comillas como esta ;

Si añadimos con frecuencia cualquier tipo de estilos puede resultar algo molesto. Nos resultará más sencillo si esos estilos los trasladamos a la plantilla.

Los estilos se añaden como su nombre indica en la hoja de estilos conocida como CSS. En nuestra plantilla los ubicaremos en el espacio comprendido entre <head> y </head> para evitar cometer algún error yo siempre aconsejo añadir los estilos justo antes de ]]></b:skin> y precisamente ahí es donde añadiremos una clase para esos estilos a la que llamaremos span.

.span{
color: orangered;
font-family: comic sans ms;
font-size: 16px;
}

Guardamos los cambios y hacemos la prueba en una entrada:
<span class="span">Aquí añadimos cualquier texto</span>
Aquí añadimos cualquier texto

Simplemente añadiendo el nombre de la clase en este caso span nuestro texto adquiere los estilos definidos para esa clase.

El juego con la etiqueta span puede ser tan divertido como nosotros estemos dispuestos a que lo sea.

Gem@Blog
Añadimos dos clases una para cada color y a cada una de esas clases le añadimos estilos.
.color-rojo {
color:#940f04;
font-size:54px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
.color-negro {
color:#000;
font-size:34px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}

Gem@Blog
Podemos continuar añadiendo un efecto hover donde el color de la fuente se invierta
.color-rojo:hover {
color:#000;
font-size:54px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
.color-negro:hover {
color: #940f04;
font-size:34px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}


Podemos seguir jugando pero será otro día

Se llama Photivisi y es un sitio donde podemos crear collages con nuestras propias imágenes en 18 modelos distintos, estos son algunos.

Últimamente vengo observando un detalle en algunas plantillas, se trata de la fecha tipo calendario que aplicamos hace tiempo al blog.

Pero el detalle no es la fecha es el lugar donde ubicamos la fecha, la situamos en el borde del blog, más exactamente en la línea de outer-wrapper.

¿Cómo hacerlo?

Lo primero de todo es configurar la fecha, nos dirigimos a Configuración | Formato | Formato de cabecera de fecha y escogemos la opción como la imagen siguiente.

Una vez tenemos la fecha establecida nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla, buscamos:

<h2 class='date-header'><data:post.dateHeader/></h2>
y lo sustituimos por

<div id='fecha'>

<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>

</div>

Ahora ubicamos la etiqueta </head> justo antes añadimos el script.

<script type='text/javascript'>

var ultimaFecha;

function remplaza_fecha(d){

if (d == &quot;&quot;) {

d = ultimaFecha;

}

var da = d.split(&#39; &#39;);

dia = &quot;<strong class='fecha_dia'>&quot;+da[0]+&quot;</strong>&quot;;

mes = &quot;<strong class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</strong>&quot;;

anio = &quot;<strong class='fecha_anio'>&quot;+da[2]+&quot;</strong>&quot;;

document.write(dia+mes);

ultimaFecha = d;

}

</script>

Más arriba buscamos ]]></b:skin> y siempre justo antes añadimos los estilos de la fecha para el día y el mes.

#fecha {

background:transparent url(url-imagen) no-repeat scroll 0 0;

height:46px;

margin:0 0 -60px -80px;

padding:7px 0;

text-align:center;

width:70px;

}

.fecha_dia {

display : block;

margin : 0;

color : #ffffff;

font-size : 14px;

font-weight : normal;

text-align : center;

}

.fecha_mes {

display : block;

font-size : 15px;

margin : 0;

color : #ffffff;

font-weight : normal;

text-align : center;

}

Donde url-imagen podemos añadir una imagen, o si lo preferimos un color de fondo con background-color:#000; si el fondo queda demasiado grande podemos reducirlo en #fecha cambiando la altura (height) y anchura (width)

¿Queda muy separado o demasiado pegado a las entradas? lo podemos mover en margin aumentando o disminuyendo margin:0 0 -60px -80px;

Si miramos en vista previa podría ser que aún no veamos la fecha ¿Por qué si lo hice todo bien? nos falta un último detalle y es ubicar #main-wrapper seguramente tienes añadido lo siguiente:

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

También puede ser lo siguiente que viene a ser lo mismo.

word-wrap: break-word;

overflow: hidden;

Es necesario eliminar esas propiedades, sin embargo la propiedad overflow: hidden; tiene una función importante, impide que un contenido demasiado grande se extienda fuera del bloque, lo vimos en algún blog que el texto o cualquier imagen no respeta el espacio del contenido y sale de su sitio.

Lo que haremos será suprimir esas propiedades de main-wrapper y añadirlas en los estilos del post de esa forma hará la misma función de evitar que se desborde cualquier contenido en las entradas.
Ahora si tenemos nuestra fecha bien visible.

.post {

estilos...

estilos...

estilos...

word-wrap: break-word;

overflow:hidden;

}

Hace tiempo tratamos sobre el tema cambiar estilos, es muy fácil de conseguir ese efecto sin embargo siempre digo que la imaginación es lo que cuenta y sin duda este es un ejemplo.

Lógicamente esa es una página creada por profesionales donde el resultado es espectacular yo diría que magistral porque combina perfectamente un diseño actual con elegancia y buen gusto.

Como siempre que me gusta algo la página quedó guardada hasta hace unos días que probando a añadir una imagen de fondo a unas transparencias pensé ¿por qué no añadirle unos cambios de estilo? los pasos a seguir son los mismos que los utilizados en cambiar estilos la diferencia está que en lugar de cambiar el color de fondo cambiamos los estilos de los colores utilizados.

DrPic es un ditor de imágenes online, las funciones que presenta son muy básicas y por lo tanto muy sencillo de utilizar. La opción de reducir imágenes me ha llamado mucho la atención porque la imagen no pierde tanta calidad como en otros editores.

Veamos un ejemplo...

263px × 441px

65px × 110px

Algunos efectos más decorativos son los marcos tipo polaroid.

Seguro que pensabas que para esto había que usar el Photoshop, adivina por qué lo sé.

Estos bonitos iconos RSS los podemos encontrar en The Theme Blog ideales para los amantes de la música.
El tamaño es de 100x100 y se presentan en formato PNG. Los colores son como los de la muestra naranja, rojo y blanco-negro.

Hay preguntas que se repiten con más frecuencia que otras una de ellas es añadir la fecha en todos los post.
Como todos sabemos cuando actualizamos varias veces el mismo día ocurre que la fecha sólo aparece en la primera entrada, en el resto no veremos fecha.
J.Miur nos explica con todo detalle como conseguir que nuestras entradas aparezcan todas con fecha.

Las indicaciones son sencillas pero aún así recomiendo leer su entrada porque estoy segura que con ella entenderemos como maneja Blogger las fechas.

Nos situamos en plantilla Edición de HTML y marcamos para expandir la plantilla.
Buscamos:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y lo sustituimos por:
<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

A partir de ahí todos nuestros post contendrán la fecha.

Si pasas el puntero sobre la siguiente imagen verás que se puede ampliar a su tamaño original.

El mismo efecto lo podemos añadir a un grupo de imágenes.

Esto es posible gracias a un script proporcionado por Dynamic Drive, Los pasos son los siguientes, descargamos el script de Dynamic Drive expando.js y lo alojamos en el servidor que solemos usar. Luego nos dirigimos a nuestra plantilla y en Edición de HTML buscamos </head> justo antes lo añadimos de la siguiente forma:

<script src='aquí-url-del-script' type='text/javascript'/>

» Donde dice aquí-url-del-script los sustituimos por la url del script que alojamos anteriormente.

Hay otra opción y es añadir el script directamente a la plantilla, de esa forma evitaremos que el archivo deje de funcionar por problemas de alojamiento como puede ser superar la banda ancha o caídas del servidor. En este caso lo añadiremos también antes de </head> de esta forma:

<script type='text/javascript'>
//<![CDATA[
// Expando
/* Expando Image Script ©2008 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */

if (document.images){
 (function(){
  var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
  var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
    return;
   var e = expConIm,
   widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
    cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    }
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
    if(d[i] == im) break;
   i = i + im.src;
   if (!e.ims[i]){
    im.title = '';
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
     e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
     e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
     e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
   if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
   e.ims[i].d = !e.ims[i].d;
   resize ();
  };

  expConIm.ims = {};

  expConIm.r = new RegExp('\\bexpando\\b');

  if (document.addEventListener){
   document.addEventListener('mouseover', expConIm, false);
   document.addEventListener('mouseout', expConIm, false);
  }
  else if (document.attachEvent){
   document.attachEvent('onmouseover', expConIm);
   document.attachEvent('onmouseout', expConIm);
  }
 })();
}
//]]>
</script>

Una vez lo tenemos añadido nos situamos justo antes de ]]></b:skin> y añadimos unos estilos para el contorno de las imágenes.

img.expando{
border: none;
vertical-align: top;
}

A esos estilos le podemos añadir diferente borde del que presentan nuestras imágenes, podéis ver algunos aquí. Si preferimos el borde igual al de las imágenes de nuestras entradas buscamos donde dice:

.post img {
aquí estarán los estilos
que podemos copiar y pegar
}

Para el ejemplo añadí:

img.expando{
background:#EFEFEF;
padding:8px;
border:2px outset #F6FAF4;
vertical-align: top;
}

Cuando tenemos los estilos definidos ya está todo listo para añadir nuestra imagen, la añadimos de la siguiente forma:

<img class="expando" src="url-de-la-imagen" width="100" border="0" height="100" />

» Con height (altura) y width (anchura) escogemos el tamaño que mostrará la imagen en miniatura.

Si deseamos añadir un grupo de imágenes:

<p><img class="expando nombre-imagen" border="0" src="url-imagen-1" width="100" height="100"><img class="expando nombre-imagen" border="0" src="url-imagen-2" width="100" height="100"><img class="expando nombre-imagen" border="0" src="url-imagen-3" width="100" height="100"></p>

» Donde url-imagen-1-2-3 lo sustituimos por la url de nuestra imagen.

» En nombre-imagen podemos añadir el nombre o título de nuestra imagen, de esa forma si tenemos que hacer una modificación sabremos sobre qué imagen la estamos haciendo.

Para el efecto del grupo de imágenes debemos tener especial cuidado que el tamaño real sea prudencial de no ser así tendríamos el siguiente problema.

¿Una solución? calcular que la suma de la imagen ampliada y las miniaturas no supere el width (ancho) de main-wrapper que es el espacio disponible para las entradas.

Eso es muy sencillo si consideramos que Blogger nos proporciona tres tamaños para las imágenes 200-320-400 de ser un tamaño distinto tendríamos que modificarlo con algún editor de imágenes.

Blogger´SPhera nos proporciona una idea de VN Weblog Guide resumir los post automáticamente cosa que antes nos veíamos obligados a hacer manualmente en post anteriores cuando añadíamos algún sistema de "leer más", una vez realizamos los cambios no tendremos que preocuparnos de nada. Eso si.. el resultado lo veremos en todos los post.

Estaría bien si antes de seguir descargamos una copia de la plantilla, lo que haremos es muy sencillo pero así tendremos más tranquilidad.

Nos situamos en plantilla Edición de HTML y marcamos para expandir la plantilla de artilugios. Buscamos </head> y justo antes añadimos lo siguiente:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Lo que sigue a continuación nos permite modificar la forma de mostrar los post resumidos y lo podemos hacer una vez terminamos todos los cambios, de esa forma podemos ver en vista previa el resultado de lo que vamos haciendo. Sería algo así:

» Donde dice var thumbnail_mode = "float" ; podemos ubicar la imagen en miniatura.

Con float la imagen se ubica a la izquierda. Si lo sustituimos por no-float la imagen se sitúa en la parte superior del pots y a continuación el resto del post.

"Cualquier cambio que hagamos sólo afectará la imagen que mostramos en los post resumidos, es decir la miniatura, una vez visualizamos el post completo la imagen se muestra en el tamaño y ubicación escogida por nosotros"

» En summary_noimg = 230 ; escogemos el número de caracteres en los post resumidos que NO contienen imágenes.

» En summary_img = 140; será el número de caracteres cuyos post contienen imágenes.

» Adjudicamos altura a la imagen en img_thumb_height = 100;

» La anchura la modificamos en img_thumb_width = 100;

Buscamos ahora lo siguiente:

<div class='post-body entry-content'>

<data:post.body/>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Y lo sustituimos por:

<div class='post-body entry-content'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span id='showlink'><a expr:href='data:post.url'> Texto para expandir el post </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

»Sustituimos Texto para expandir el post por el texto que hará de vínculo para mostrar el post en su totalidad.
»También podemos añadir una imagen en lugar del texto si añadimos:

<img src="url-imagen" />

» Si deseamos añadir unos estilos a ese texto podemos hacerlo con la etiqueta span.
<span style='color:#000;font-size:14px;'> Texto para expandir el post</span>
Ahí mismo podemos modificar el color de letra, tamaño y fondo.

El resultado de estas explicaciones podéis verlo aquí.